<script setup >
const props = defineProps(["menus"])
const activeIndex = ref("/");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>
<template>
  <div class="lg:flex hidden color-white w-[100%] h-[100%] bg-[#545c64] justify-center">
      <!-- pc  header -->
      <el-menu :default-active="activeIndex" class="lg w-3/4" mode="horizontal" background-color="#545c64"
        style="border: 0" text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
        <el-menu-item index="0">
          <NuxtLink to="/" class="hover:text-primary-600 dark:text-primary-200"><img style="width: 200px"
              src="/assets/images/logo.png" alt="logo" /></NuxtLink>
        </el-menu-item>

        <el-menu-item :index="item.path" v-for="(item, index) in menus" :key="item.path" :to="item.path">
          <NuxtLink v-if="!item.children || !item.children.length" :to="item.path"
            class="hover:text-primary-600 dark:text-primary-200">{{ item.name }}
          </NuxtLink>
          <template v-else>
            <PopMenus :item ></PopMenus>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
</template>
